<template>
    <div>
        <!--密码登录界面-->
        <div id="PswLogin">
            <input type="text" placeholder="手机号码 / 邮箱" v-model="user.username">
            <input type="password" placeholder="登录密码" @input="input" v-model="user.psw">

            <button ref="login" @click="Nowlogin">立即登录</button>
            <div id="PswLogin-bottom">
                <router-link to="/Myself/Regist">
                    <p>立即注册</p>
                </router-link>
                <router-link to="">
                    <p>忘记密码</p>
                </router-link>
                
            </div>
        </div>	
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default{
    data:function(){
        return{
            user:{
                username:null,
                psw:null
            }
        }
    },
    computed:{
        ...mapState([
            "loginalert"
        ])
    },
    methods:{
        input:function(e){
            if(e.target.value.length>=6){
                this.$refs.login.style.backgroundColor = "#ee4000"
            }else{
                this.$refs.login.style.backgroundColor = "#eee5de"
            }
        },
        Nowlogin:function(){
            this.$store.dispatch("login",this.user)
            .then(data=>{
                this.layer.msg(this.loginalert)
            })
        }
    }
}
</script>

<style scoped>
    #PswLogin{
        margin-top: 3vh;
        padding-left: 10vw;
        font-size: 4vw;
    }
    #PswLogin input{
        width: 80vw;
        height: 7vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
        border:1px solid #dedede;
        color:grey;
        padding-left: 5vw;
    }
    #PswLogin button{
        margin-top: 2vh;
        background-color: #eee5de;
        color: white;
        border-radius: 5px;
        border: none;
        width: 80vw;
        height: 8vh;
    }
    #PswLogin-bottom{
        margin-top: 2vh;
        width: 80vw;
        display: flex;
        justify-content: space-between;
        color: #5b5b5b;
    }
    #PswLogin-bottom a{
        color: #5b5b5b;
        text-decoration: none;
    }
</style>